<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{a.b.c.d}}
    <span v-html="a.b.c.d"></span>
    <div v-text="a.b.c"></div>
</div>
</body>
<script src="./MVVM/mvvm.js"></script>
<script src="./MVVM/observer.js"></script>
<script src="./MVVM/compile.js"></script>
<script src="./MVVM/watcher.js"></script>
<script>
    //弄清数据响应式的原理!!!! dep & watcher
    //dep 可以 代表data中的每一个数据
    //watcher 可以 代表模板上的任意一个指令

    /*
        一个dep 能不能 对应多个watcher?
            {{msg}} <span v-html="msg"></span>
        一个watcher 能不能 对应多个dep
            {{a.b.c.d}}
        dep 和 watcher 应该是多对多的关系
            {{a.b.c.d}} <span v-html="a.b.c.d"></span>
    */
    var vm = new MVVM({
        el:"#app",
        data:{
            msg:"hello mvvm",
            a:{
                b:{
                    c:{
                        d:"d-msg"
                    }
                },
                e:"e"
            },
            test:"test"
        }
    })

    //数据劫持的顺序: msg d c b e a test
    //dep分配的顺序: msg a b c d e test
    setTimeout(()=>{
        //触发数据的响应式
        vm.a.b.c.d="update d-msg"
    },1000)
</script>
</html>